<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script src="three.js"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script>
        var cc;
        var dd;
    $(document).mousemove(function (e) {
            cc = e.offsetX;
            dd = e.offsetY;
            console.log(cc + ":" + dd);
            

        });
        // Our Javascript will go here.
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(9, 0, 5);
        var material = new THREE.MeshBasicMaterial({
            color: 0x0ffff0
        });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 10;

        var render = function() {
            requestAnimationFrame(render);

            cube.rotation.x =dd*0.006;
            cube.rotation.y =cc*0.006*-1;

            renderer.render(scene, camera);
        };

        render();
    </script>
</body>

</html>